<template>

    <div class="has-padding-sm">

<!--        <div class="heading outline">-->
<!--            <i class="icon-cogs avatar"></i>-->
<!--            <div class="title">-->
<!--                <nav class="nav">-->
<!--                    <a href="javascript:;" :class="getSelectedClass(baseInformation.tab)"-->
<!--                       @click="selectTab(baseInformation.tab)">{{baseInformation.label}}</a>-->
<!--                </nav>-->
<!--            </div>-->

<!--            <nav class="nav right">-->
<!--                <a href="javascript:history.go(-1)" class="btn rounded grass"><i class="icon icon-arrow-left"></i>{{this.$t('back')}}</a>-->
<!--            </nav>-->
<!--        </div>-->
<!--        <div class="clearfix"></div>-->

        <keep-alive>
            <component
                    :is="currentTab"
                    :commonData="commonData"
                    @afterSave="afterSave"
                    @afterFind="afterFind"
                    :hasBack="false"
            ></component>
        </keep-alive>

    </div>

</template>
<!--
暂且固定两个tab。不做插槽功能

// this.attributesets = [
//     {name: 'id', label: 'id', inputType: 'text', component: 'XInput', required: true, value: 'aaa', placeholder: '', errors: ''},
//     {name: 'mobile', label: 'mobile', inputType: 'number', component: 'XInput', value: 1, placeholder: '', errors: ''},
//     {name: 'items', label: 'items', component: 'XSelect', items: {a: 'Aa', b: 'Bb'}, errors: ''},
//     {name: 'textarea', label: 'textarea', component: 'XTextarea', value: '....', errors: ''},
//     {name: 'checkbox', label: 'checkbox', component: 'XCheckBox', value: '....', errors: ''},
// ];
-->
<script>
    import BaseInfoFormTab from "@/components/FormTab/BaseInfoFormTab";
    export default {
        components: {BaseInfoFormTab},
        data() {
            return {
                // base info props

                commonData: {
                    columns: 3,
                    primaryKeys: {name: ''},
                    baseInfoAction: '/sys/rbac/menu/edit',
                },

                // model
                isNewRecord: true,
                // inputItems: [],

                // tabs
                currentTab: 'BaseInfoFormTab',
                baseInformation: {
                    tab: 'BaseInfoFormTab',
                    label: this.$t('BaseInformation'),
                    active: true
                },
            }
        },
        methods: {
            selectTab(tab) {
                this.currentTab = tab;
            },
            getSelectedClass(tab) {
                return tab === this.currentTab ? 'btn grass rounded' : '';
            },
            afterSave(response) {
                this.isNewRecord = response.data.isNewRecord;
                this.commonData.primaryKeys = response.data.primaryKeys;
            },
            afterFind(response) {
                this.isNewRecord = response.data.isNewRecord;
            },
        },
        mounted() {
            // let params = this.$route.params;
            // console.log(params)
            // this.commonData.primaryKeys.name = params.name;
        },
        created() {
            let queryParams = this.$route.params;
            let that = this;
            Object.keys(this.commonData.primaryKeys).forEach(function (key) {
                if (that.commonData.primaryKeys.hasOwnProperty(key)) {
                    that.commonData.primaryKeys[key] = queryParams[key];
                }
            });
        }
    }
</script>
<style scoped>
    .heading .title {
        padding: .25rem;
    }

    .nav > a, .nav.right > a {
        height: 1.5rem;
        opacity: 1;
    }

    .tab-selected {
        text-decoration-line: underline;
    }

    .nav.right > a {
        margin-right: .25rem;
    }
</style>